<template>
  <div class="logo-cla" @click="toggleClick">
    <!-- <svg
      :class="{'is-active':isActive}"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
      fill="currentColor"
    >
      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
    </svg> -->

    <!-- <svg t="1744358286981" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1597" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M704.92 835.1l9.49 102.05L787.03 865 898.1 557.44l-82.11-29.43L704.92 835.1z m120.56-333.2l20.41-56L928 475.32l-20.41 56.02-82.11-29.44zM306.22 257.94a29.28 29.28 0 0 0 29.43-29.43v-89.23a29.43 29.43 0 1 0-58.85 0V228a29.68 29.68 0 0 0 29.42 29.9z m89.23-29.43h59.33a29.43 29.43 0 1 0 0-58.85h-59.33A29.57 29.57 0 0 0 366 199.08c-0.48 16.14 12.81 29.43 29.42 29.43z m148.09 29.43A29.27 29.27 0 0 0 573 228.51v-89.23a29.43 29.43 0 0 0-58.86 0V228a29.68 29.68 0 0 0 29.43 29.9z m0 622.26h-356a29.28 29.28 0 0 1-29.43-29.43V257.94a29.28 29.28 0 0 1 29.43-29.43h29.9a29.43 29.43 0 1 0 0-58.85h-29.9a88.62 88.62 0 0 0-88.74 88.75v592.83A88.62 88.62 0 0 0 187.56 940h355.51a29.58 29.58 0 0 0 29.43-29.43 29.12 29.12 0 0 0-29-30.37z m177.99-355.51A29.58 29.58 0 0 0 751 495.26V257.94a88.63 88.63 0 0 0-88.76-88.76h-29.46a29.43 29.43 0 1 0 0 58.86h29.42a29.28 29.28 0 0 1 29.43 29.43v237.32a29.78 29.78 0 0 0 29.9 29.9z" p-id="1598" fill="#1296db"></path><path d="M413.49 503.33c-3.8-10-7.12-18-9.49-23.73a112.55 112.55 0 0 0-9-16.6 41.37 41.37 0 0 0-14.24-12.82c-5.7-3.32-13.29-4.75-21.83-4.75a51 51 0 0 0-21.83 4.75c-6.18 2.85-10.45 7.6-14.25 12.82a78.07 78.07 0 0 0-10 19.93c-3.33 8.07-5.7 14.72-8.07 20.41L226 702.2q-5 12.1-7.12 18.52a41.73 41.73 0 0 0-1.9 12.81c0 7.12 2.85 13.77 9 19.46s12.81 8.54 20.88 8.54c9.5 0 16.14-2.84 19.94-8.06s9-15.67 14.71-30.86l14.72-39.39h125.3l14.71 38.44c1.9 4.75 4.27 10 7.12 16.62 2.85 6.17 5.22 10.91 7.6 13.76a27.25 27.25 0 0 0 9 7.12c3.32 1.9 7.59 2.37 12.81 2.37a29.37 29.37 0 0 0 21.83-9c5.7-5.7 9-12.34 9-19.46 0-6.65-3.32-17.57-9.49-32.75zM313.34 637.18l45.57-126.25 46.51 126.25z m288.11-208.85H572v-29.42a29.28 29.28 0 0 0-29.43-29.43 29.57 29.57 0 0 0-29.42 29.43v29.42h-29.41a29.27 29.27 0 0 0-29.43 29.44 29.57 29.57 0 0 0 29.43 29.42h29.43v29.43a29.27 29.27 0 0 0 29.42 29.43A29.58 29.58 0 0 0 572 516.62v-29.43h29.43a29.26 29.26 0 0 0 29.42-29.42 29.58 29.58 0 0 0-29.42-29.44z m0 0" p-id="1599" fill="#1296db"></path></svg> -->

    <img src="@/assets/logo/logo.png" alt="" style="width: 35px;"></img>
  </div>
</template>

<script setup>
import xiangyun from '@/assets/images/xiangyun.svg'
defineProps({
  isActive: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits()
const toggleClick = () => {
  emit('toggleClick');
}
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 33px;
  height: 33px;
}

/* .hamburger.is-active {
  transform: rotate(180deg);
} */


.logo-cla {
  padding: 0 15px;
  margin-top: 8px;
  padding-left: 10px;
  padding-right: 0;

  /* 旋转动画 */
  animation: rotate 2s linear infinite;
  /* 2秒一圈，匀速，无限循环 */
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}
</style>
